<template>
  <draggable
    v-model="selectOptions"
    :sort="false"
    :clone="cloneDog"
    item-key="prop"
    :group="{ name: 'people', pull: 'clone', put: false }"
    class="select-box"
  >
    <template #item="{ element }">
      <div class="select-item">
        <div class="label">
          {{ element.label }}
        </div>
      </div>
    </template>
  </draggable>
</template>

<script setup lang="ts">
import draggable from 'vuedraggable';
import { ref } from 'vue';
import { formList } from '../../basic/defaultForm';
let count = ref(0);

const cloneDog = op => {
  console.log('>>', op);

  return {
    ...op,
    prop: `${op.prop}-${count.value++}`
  };
};

let selectOptions = ref([...formList]);
</script>

<style lang="scss" src="./index.scss"></style>
